<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('账套')">
        <el-select v-model="queryParams.fundAccountId" @change="changeLedgerPeriod">
          <el-option v-for="item in finFundAccountList" :key="item.id" :label="item.accountName" :value="item.id" />
        </el-select>
      <!-- {{ queryParams.yearMonth }} -->
      </el-form-item>
      <el-form-item :label="$t('周期')">
        <el-select v-model="queryParams.yearMonth" placeholder="请选择" @change="changePeriod">
          <el-option v-for="item in periodOptions" :key="item.id" :label="item.accountYearMonth" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportHandle">{{ $t('导出') }}</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :height="windowHeight"
      :data="dataList"
      border
      stripe
      style="width: 100%;margin-bottom: 20px;"
      :row-style="{ height: '42px' }"
      @cell-mouse-enter="showButton"
      @cell-mouse-leave="hideButton"
    >
      <el-table-column :label="$t('资产')" prop="subjectName" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="custom-cell" :class="[scope.row.strong ? 'bold-text' : 'indented-text']">{{ scope.row.subjectName }}</span>
          <el-button v-show="scope.row.hover && !scope.row.strong" type="text" size="mini" @click="handleButtonClick(scope.row,scope)">编辑公式</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('行次')" align="right" prop="lineNumber" width="80" />
      <el-table-column :label="$t('期末余额')" align="right" prop="endingBalanceAmount" width="180">
        <template slot-scope="scope">
          {{ formattedNumber(scope.row.endingBalanceAmount) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('年初余额')" align="right" prop="beginningBalanceAmount" width="180">
        <template slot-scope="scope">
          {{ formattedNumber(scope.row.beginningBalanceAmount) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('负债和所有者权益')" prop="subjectName" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="custom-cell" :class="[scope.row.strong2 ? 'bold-text' : 'indented-text']">{{ scope.row.subjectName2 }}</span>
          <el-button v-show="scope.row.hover && !scope.row.strong2" type="text" size="mini" @click="handleButtonClick(scope.row,scope)">编辑公式</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('行次')" align="right" prop="lineNumber2" width="80" />
      <el-table-column :label="$t('期末余额')" align="right" prop="endingBalanceAmount" width="180">
        <template slot-scope="scope">
          {{ formattedNumber(scope.row.endingBalanceAmount2) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('年初余额')" align="right" prop="beginningBalanceAmount" width="180">
        <template slot-scope="scope">
          {{ formattedNumber(scope.row.beginningBalanceAmount2) }}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-if="formOpen"
      :title="$t(title)"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="dialogForm"
      append-to-body
    >
      <editReportFormula
        ref="editReportFormula"
        dict-type="fin_rule_income_cash_flow_sheet"
        :fund-id="queryParams.fundAccountId"
        :year-month="queryParams.yearMonth"
      />
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import {
  findBSReport,
  getLedgerPeriod
} from '@/api/fin/report/finReport'
import {
  getFundAccountYearMonthList
} from '@/api/fin/fundAccount/finFundAccount'
import editReportFormula from './editReportFormula.vue'

export default {
  components: {
    editReportFormula
  },
  data() {
    return {
      title: '编辑公式',
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      dataList: [],
      fundLedgerOptions: [],
      periodOptions: [],
      finFundAccountList: [],
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        fundAccountId: undefined,
        yearMonth: undefined,
        subjectType: 'balance_sheet'
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      fundAccountId: undefined,
      yearMonth: undefined,
      windowHeight: document.documentElement.clientHeight - 260 // 实时屏幕高度
    }
  },
  computed: {
    ...mapState('finReport', ['finQueryParams'])
  },
  created() {
    this.getFundAccountList()
  },
  methods: {
    ...mapActions('finReport', ['changeQueryParams']),
    /** 查询公司财务运营模板列表 */
    getList() {
      this.loading = true
      findBSReport(this.queryParams).then(response => {
        this.dataList = response.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    handleButtonClick(row, scope) {
      const columnName = scope.column.label
      let subjectName = ''
      if (columnName === '资产') {
        const id = row.id
        row['id'] = id
        subjectName = row.subjectName
      } else if (columnName === '负债和所有者权益') {
        const id = row.id2
        row['id'] = id
        subjectName = row.subjectName2
      }
      this.formOpen = true
      this.title = `编辑公式-${subjectName}`
      this.$nextTick(() => {
        this.$refs.editReportFormula.init(row)
      })
    },
    // 获取基金账套列表
    getFundAccountList() {
      getFundAccountYearMonthList({}).then(response => {
        this.finFundAccountList = response.data
        if (this.finFundAccountList && this.finFundAccountList.length > 0) {
          const item = this.finFundAccountList[0]
          // 初始化加载默认账套时，查询科目
          this.queryParams.fundAccountId = item.id
          this.queryParams.yearMonth = item.carryoverRecordId
          this.fundAccountId = item.id
          this.yearMonth = item.carryoverRecordId
          getLedgerPeriod(item.id).then(res => {
            this.periodOptions = res.data
          })
          if (this.finQueryParams.accountId && this.finQueryParams.yearMonth) {
            getLedgerPeriod(this.finQueryParams.accountId).then(res => {
                this.periodOptions = res.data
              })
            this.queryParams.fundAccountId = this.finQueryParams.accountId
            this.queryParams.yearMonth = this.finQueryParams.yearMonth
          }
          this.getList()
        } else {
          this.loading = false
        }
      })
    },
    changeLedgerPeriod(val) {
      this.fundAccountId = val
      getLedgerPeriod(val).then(res => {
        this.periodOptions = res.data
      })
      this.finFundAccountList.forEach(item => {
        if (val === item.id) {
          this.queryParams.yearMonth = item.carryoverRecordId
          this.changeQueryParams(this.queryParams)
        }
      })
    },
    // 导出
    exportHandle() {
      this.$confirm(this.$t('是否导出Excel?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        const queryParams = this.queryParams
        this.downLoadExcelPost('/fin/finReport/exportBSExcel', queryParams).then(response => {
          if (response.code === 200) {
            this.msgSuccess(this.$t(response.msg))
          } else {
            this.msgError(this.$t(response.msg))
          }
        })
      }).catch(() => {})
    },
    changePeriod(val) {
      this.yearMonth = val
      this.changeQueryParams(this.queryParams)
    },
    showButton(row) {
      row.hover = true
    },
    hideButton(row) {
      row.hover = false
    }
  }
}
</script>

<style scoped>
.cell {
  height: 54px !important;
}
.bold-text {
  font-weight: bold;
  font-size: 14px;
}
.indented-text {
    text-indent: 20px !important;
  }
.custom-cell {
  white-space: break-spaces !important;
}
.el-table .el-table__body-wrapper tbody tr td {
    text-indent: 20px;
}
</style>
